<template>
    <h1>登录</h1>
    <table class="table table-bordered">
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" v-model="state.name">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" v-model="state.pwd">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="登录" class="btn btn-success" @click="loginadd">
            </td>
        </tr>
    </table>
  </template>
  
  <script setup lang="ts">
  //reactive实现响应式数据的方式
  import {reactive, toRefs} from 'vue'
  import {useRouter} from 'vue-router'
  import axios from 'axios'
  
//页面跳转并且传参
  const router=useRouter();
  //route路由器对象 接收参数
  const route=useRouter();

  let data:any=reactive({
    state:{
        name:'',
        pwd:''
    }
  })
  let{state} =toRefs(data)

  const loginadd=()=>{
    if(state.value.name==""){
        alert("用户名不能为空")
        return;
    }
    if(state.value.pwd==""){
        alert("密码不能为空")
        return;
    }
    let obj={
        username:state.value.name,
        password:state.value.pwd
    }
    axios({
        url:'/api/Member/Login',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data.data!=null){
            alert("登录成功")
            router.push("/list")
        }else{
            alert("用户名或者密码错误")
        }
    })
    .catch(err=>{
        console.log(err)
    })
  }
  </script>
  
  <style scoped>
  
  </style>